<template>
  <el-card class="sales">
    <!-- 想通过这个模板快速获取到子组件中的类名，然后进行设置 -->
    <template #header>
      <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>
      <div class="sales-right">
        <el-radio-group v-model="state.time">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>
        <el-date-picker v-model="state.value" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" />
      </div>
    </template>
    <div class="sales-content">
      <!-- 柱状图和右侧的列表 -->
      <v-chart class="line-chart" :option="getBarOption()" autoresize></v-chart>
      <div class="sales-content-list">
        <h4>门店{{ state.activeIndex == '1'?'销售额':'访问量' }}排名</h4>
        <!-- <ul>
          <li><span class="list-no">1</span><span>肉夹馍</span><span>323,234</span></li>
          <li><span class="list-no">2</span><span>裤带面</span><span>123,456</span></li>
          <li><span class="list-no">3</span><span>饸饹面</span><span>456,789</span></li>
          <li><span>4</span><span>熏肉大饼</span><span>299,123</span></li>
          <li><span>5</span><span>水盆羊肉</span><span>266,223</span></li>
          <li><span>6</span><span>魏家凉皮</span><span>219,663</span></li>
          <li><span>7</span><span>兰州拉面</span><span>200,997</span></li>
        </ul> -->
        <ul>
          <li v-for="rank in rankData" :key="rank.no"><span :class="{'list-no' :rank.no<=3}">{{ rank.no }}</span><span>{{ rank.name }}</span><span>{{ rank.count }}</span></li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sales'
};
</script>
<script lang="ts" setup>
import { ref,reactive,computed,watch } from 'vue';
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const {numberFormat, moneyFormat} = useFormat()
const reportInfoStore = useReportDataStore()

// 统一定义一个对象 来存储tab栏切换的值 与时间值
const state = reactive({
  activeIndex: '1',
  time: '本周',
  value:''
})
const size = ref<'default' | 'large' | 'small'>('default');

// 使用计算属性精简store中的数据
// 1. 销售额X轴的数据
const orderFullYearAxis = computed(() => reportInfoStore.reportInfo.orderFullYearAxis)
// 销售额Y轴的数据
const orderFullYear = computed(() => reportInfoStore.reportInfo.orderFullYear)
// 用户访问量X轴的数据
const userFullYearAxis = computed(() => reportInfoStore.reportInfo.userFullYearAxis)
// 用户访问量Y轴的数据
const userFullYear= computed(()=> reportInfoStore.reportInfo.userFullYear)

// 右侧列表会用到的数据
const orderRank = computed(() => reportInfoStore.reportInfo.orderRank)
const userRank = computed(() => reportInfoStore.reportInfo.userRank)
const rankData = computed(() => state.activeIndex == '1'? orderRank.value : userRank.value)

const handleSelect = (key: string) => {
  // console.log(key);
  state.activeIndex = key
};
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

// 下面的这个函数，其实相当于是有两组数据来不同的切换
const getBarOption = () => {
  const text = state.activeIndex=='1'?'销售额趋势':'访问量趋势'
  return {
    title: {
      text,
      // 设置主标题样式
      textStyle: {
        fontSize : 14
      },
      left:10
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 20,
      top:40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data:state.activeIndex=='1'?orderFullYearAxis.value:userFullYearAxis.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: state.activeIndex=='1'?'销售额':'访问量',
        type: 'bar',
        barWidth: '36%',
        // data: [10, 52, 200, 334, 390, 330, 220]
        data: state.activeIndex=='1'?orderFullYear.value:userFullYear.value
      }
    ]
  };
};
</script>

<style lang="scss" scoped>
.sales {
  // margin-top: 20px;
  margin: 20px 0;
  // 使用深度选择器来获取子组件中的类名(深层次的类名)
  :deep(.el-card__header) {
    position: relative;
    padding: 0 20px;
    border-bottom: none;
    .sales-right {
      height: 100%;
      position: absolute;
      right: 20px;
      top: 0;
      display: flex;
      align-items: center;
      .el-date-editor {
        width: 340px;
        margin-left: 20px;
      }
    }
  }
  .sales-content {
    display: flex;
    .line-chart {
      // 左侧的柱状图div
      flex: 5;
      height: 270px;
    }
    .sales-content-list {
      flex: 2;
      h4 {
        font-size: 14px;
        font-weight: 500;
      }
      ul {
        list-style: none;
        padding: 0 12px 0 0;
        font-size: 12px;
        li {
          height: 26px;
          line-height: 26px;
          span {
            cursor: pointer;
            &:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              margin-right: 10px;
            }
            &.list-no {
              background-color: #000;
              color: #fff;
              border-radius: 50%;
            }
            &:last-child {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>